<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container {
		    position: relative;
		    width: 375px;
		    height: 100vh;
		    margin: 0 auto;
		    overflow: hidden;
		    background: linear-gradient(180deg, #fff, #ccc);
		
		}
		
		.wave,
		.wave1,
		.wave2 {
		    position: absolute;
		    bottom: -6%;
		    width: 375px;
		    height: 375px;
		    background-color:hsla(196, 100%, 53%, .96);
		    border-radius: 45%;
		    animation: rotate 6s linear infinite;
		  /*  // mix-blend-mode: multiply; */
		}
		
		.wave1 {
		    background-color: hsla(196, 100%, 53%, .95);
		    transform: translate(-20%, 0) rotate(0deg);
		    animation: rotate1 6s linear -4s infinite;
		}
		
		.wave2 {
		    background-color: hsla(196, 100%, 53%, .94);
		    transform: translate(20%, 0) rotate(0deg);
		    animation: rotate2 6s linear -2s infinite;
		}
		
		@keyframes rotate {
		    50% {
		        border-radius: 38%;
		        transform: rotate(180deg);
		    } 100% {
		        border-radius: 45%;
		        transform: rotate(360deg);
		    }
		}
		
		@keyframes rotate1 {
		    50% {
		        border-radius: 38%;
		        transform: translate(-30%, 8%) rotate(180deg);
		    }100% {
		        border-radius: 45%;
		        transform: translate(-20%, 0%) rotate(360deg);
		    }
		}
		
		@keyframes rotate2 {
		    50% {
		        transform: translate(30%, 8%) rotate(180deg);
		    }100% {
		        transform: translate(20%, 0%) rotate(360deg);
		    }
		}
	</style>
	<body>
		<div class="container">
		    <div class="wave"></div>
		    <div class="wave1"></div>
		    <div class="wave2"></div>
		</div>
	</body>
</html>
